<template>
    <div class="orderDetails">
        <Top text="订单详情"/>
        <div class="location">
            <div class="select">
                <div class="address">
                    {{onesOrder.address.address}}
                </div>
                <div class="bugPhoto">
                    <div class="name"> {{onesOrder.address.name}}</div>
                    <div class="phone"> {{onesOrder.address.phone}}</div>
                </div>
                <p class="right">></p>
            </div>
        </div>

        <div class="list">
            <p class="title">商品列表</p>
            <Item 
                v-for="item in onesOrder.goods" :key="item._id"
                :data="item"
            />
        </div>

        <div class="info">
            <div class="title">订单信息</div>
            <p>订单编号：<span>{{onesOrder._id}}</span></p>
            <p>下单时间：<span>{{onesOrder.addTime}}</span></p>
            <p>支付总额：￥<span>{{onesOrder.sum}}</span></p>
        </div>

        <div class="del" @click="delOrder">
            删除评论
        </div>

        <Bg 
            v-show="isBg" 
            title="温馨提示" 
            content="该订单删除后不可恢复！必须谨慎删除！请问是否删除？"
            @isExit="(isExit) => {this.isExit = isExit}" 
        />

         <Tip v-show="tips.isTips" :tipsText="tips.tipText"/>
    </div>
</template>

<script>
    import Bg from '@/components/Bg'
    import {mapState} from 'vuex'
    import Item from '@/views/Settlement/goodsItem'
    export default {
        name:"OrderDetails-Order",
        props:['data'],
        components:{ Item, Bg },
        data(){
            return {
                isBg:false,
                isExit:null,
            }
        },
        methods: {
            delOrder(){
                this.isBg = true
            }
        },
        computed:{
            ...mapState('Home',['onesOrder','tips'])
        },
        watch:{
            isExit(val){
                if(val){
                    this.$store.dispatch('Home/delOrder',this.$route.query._id)
                    setTimeout(()=>{
                        this.$router.push('/order')
                    },1000)
                }else{
                    this.isBg = false
                }
                
            }
        },
        mounted() {
            this.$store.dispatch('Home/getOnesOrder',this.$route.query._id)
        },
    }
</script>

<style scoped lang="less">
    .del{
        width: 100px;
        height: 40px;
        position: fixed;
        bottom: 0;
        background: #1272FE;
        color: #fff;
        right: 0px;
        text-align: center;
        line-height: 40px;
        
    }

    .info{
        background: #fff;
        width: 95%;
        margin: 0 auto;
        padding: 4vw 0 4vw 0;
        margin-top: 4vw;
        margin-bottom: 4vw;
        box-shadow: 1.3vw 1.3vw 1.3vw 1.3vw rgba(204, 204, 204, 0.11);
        .title{
            font-size: 3.7vw;
            font-weight: 600;
            padding: 0 2.7vw 2.7vw 2.7vw
        }

        p{
            padding: 0 2.7vw 2.7vw 2.7vw
        }
    }
    .list{
        background: #fff;
        width: 95%;
        margin: 0 auto;
        padding: 4vw 0 4vw 0;
        margin-top: 4vw;
        margin-bottom: 4vw;
        box-shadow: 1.3vw 1.3vw 1.3vw 1.3vw rgba(204, 204, 204, 0.11);
        

        p{
            font-size: 3.7vw;
            font-weight: 600;
            padding: 0 2.7vw 2.7vw 2.7vw
        }
    }

    .location{
        padding: 2.7vw 0;
        width: 95%;
        margin: 0 auto;
        background: #fff;
        height: 26.7vw;
        border-radius: 2.7vw;
        box-shadow: 1.3vw 1.3vw 1.3vw 1.3vw rgba(204, 204, 204, 0.11);
        display: flex;
    }
    .select{
        width: 100%;
        height: 26.7vw;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding: 0 4vw;
        position: relative;

        .right{
            position: absolute;
            right: 4vw;
            font-size: 5.3vw;
            color: #ccc;
        }
        
        .address{
            font-size: 4.3vw;
            margin-bottom: 2.7vw;
            font-weight: 600;
        }
        .bugPhoto{
            display: flex;
            color: #333;
            font-weight: 600;
            font-size: 3.7vw;

            .name{
               
                margin-right: 5.3vw;
            }
        }
    }

</style>